<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
</head>

<body>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 >图书管理</h4>

            <a href="add.html" class="btn btn-info">添加图书</a>
            <form action="#" class="form-inline pull-right">
                <div class="form-group">
                    <select name="" id="" class="form-control">
                        <option value="">书名</option>
                        <option value="">作者</option>
                        <option value="">出版社</option>
                    </select>
                </div>
                <div class="form-group">
                    <input type="text" name="value" placeholder="请输入查询条件" id="" class="form-control">
                </div>
                <button type="submit" class="btn btn-info">搜索</button>
            </form>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <table class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>作者</th>
                    <th>价格</th>
                    <th>当当价</th>
                    <th>出版社</th>
                    <th>出版时间</th>
                    <th>封面图</th>
                    <th>销量</th>
                    <th>库存</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>儒林外史</td>
                    <td>吴敬梓</td>
                    <td>12.0</td>
                    <td>10.0</td>
                    <td>花山文艺出版社</td>
                    <td>2020-06-01</td>
                    <td><img src="" alt="" style="height:20px"></td>
                    <td>1</td>
                    <td>999</td>
                    <td>
                        <a href="update.html" class="btn btn-warning">修改</a>
                        <a href="#" class="btn btn-danger" data-target="#book1" data-toggle="modal">删除</a>
                    </td>
                    <div id="book1" class="modal fade">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <h5 class="text-danger">确认删除吗?</h5>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary btn-sm" onclick="alert('修改确认按钮的单击事件');location.href='删除地址?id=xxx';">确认</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </tr>
                <tr>
                    <td>聊斋志异</td>
                    <td>蒲松龄</td>
                    <td>15.0</td>
                    <td>14.0</td>
                    <td>民主与建设出版社</td>
                    <td>2020-06-01</td>
                    <td><img src="" alt="" style="height:20px"></td>
                    <td>0</td>
                    <td>1000</td>
                    <td>
                        <a href="#" class="btn btn-warning">修改</a>
                        <a href="#" class="btn btn-danger" data-target="#book2" data-toggle="modal">删除</a>
                    </td>
                    <div id="book2" class="modal fade">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <h5 class="text-danger">确认删除吗?</h5>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary btn-sm" onclick="alert('修改确认按钮的单击事件');location.href='删除地址?id=xxx';">确认</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </tr>
                <tr>
                    <td>金瓶梅</td>
                    <td>兰陵笑笑生</td>
                    <td>125.0</td>
                    <td>120.0</td>
                    <td>吉林大学出版社</td>
                    <td>2020-06-01</td>
                    <td><img src="" alt="" style="height:20px"></td>
                    <td>1</td>
                    <td>999</td>
                    <td>
                        <a href="#" class="btn btn-warning">修改</a>
                        <a href="#" class="btn btn-danger" data-target="#book3" data-toggle="modal">删除</a>
                    </td>
                    <div id="book3" class="modal fade">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <h5 class="text-danger">确认删除吗?</h5>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary btn-sm" onclick="alert('修改确认按钮的单击事件');location.href='删除地址?id=xxx';">确认</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </tr>
                <tr>
                    <td>东周列国志</td>
                    <td>冯梦龙</td>
                    <td>20.0</td>
                    <td>19.0</td>
                    <td>民主与建设出版社</td>
                    <td>2020-06-01</td>
                    <td><img src="" alt="" style="height:20px"></td>
                    <td>2</td>
                    <td>998</td>
                    <td>
                        <a href="#" class="btn btn-warning">修改</a>
                        <a href="#" class="btn btn-danger" data-target="#book4" data-toggle="modal">删除</a>
                    </td>
                    <div id="book4" class="modal fade">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <h5 class="text-danger">确认删除吗?</h5>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary btn-sm" onclick="alert('修改确认按钮的单击事件');location.href='删除地址?id=xxx';">确认</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </tr>
                <tr>
                    <td>世说新语</td>
                    <td>刘义庆</td>
                    <td>30.0</td>
                    <td>28.0</td>
                    <td>上海古籍出版社</td>
                    <td>2020-06-01</td>
                    <td><img src="" alt="" style="height:20px"></td>
                    <td>0</td>
                    <td>1000</td>
                    <td>
                        <a href="#" class="btn btn-warning">修改</a>
                        <a href="#" class="btn btn-danger" data-target="#book5" data-toggle="modal">删除</a>
                    </td>
                    <div id="book5" class="modal fade">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <h5 class="text-danger">确认删除吗?</h5>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary btn-sm" onclick="alert('修改确认按钮的单击事件');location.href='删除地址?id=xxx';">确认</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </tr>
                </tbody>
            </table>
            <ul class="pagination">
                <li><a href=""><span>&laquo;</span></a></li>
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                <li><a href="">5</a></li>
                <li><a href=""><span>&raquo;</span></a></li>
            </ul>
        </div>
        <div class="panel-footer"></div>
    </div>
</body>
</html>